<template>
  <div class="home">
    <input type="text" v-model="txt" /><button @click="addHandle">搜索</button
    ><button @click="clearHadnle">清除</button>
    <p v-for="(item, index) in searchList" :key="index">{{ item }}</p>
    <ul>
      <li
        @click="targetHandle(item.id)"
        v-for="item in dataList"
        :key="item.id"
      >
        <img :src="item.img_url" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  name: "Home", 
  data() {
    return {
      dataList: [],
      txt: "",
      searchList: [],
    };
  },
  methods: {
    targetHandle(id) {
      this.$router.push({
        path: "/page",
        query: { id: id },
      });
    },
    addHandle() {
      this.searchList.push(this.txt);
      localStorage.setItem("list", JSON.stringify(this.searchList));
    },
    clearHadnle() {
      this.searchList = [];
      localStorage.setItem("list", JSON.stringify(this.searchList));
    },
  },
  mounted() {
    if (localStorage.getItem("list"))
      this.searchList = JSON.parse(localStorage.getItem("list"));
    else this.searchList = [];
    this.$http
      .get("http://www.liulongbin.top:3005/api/getgoods?pageindex=1")
      .then((res) => {
        this.dataList = res.data.message;
        console.log(this.dataList);
      });
  },
};
</script>
